<template>
    <div class="system-user-dialog-container">
        <el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
            draggable v-model="visible">
            <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
                <el-row :gutter="20">
                    
                    <el-col :span="12" class="mb20">
                        <el-form-item :label="$t('bar.printer')" prop="printer">
                            <el-select v-model="PrinterName" placeholder="Select" style="width: 160px">
                                <el-option :key="ds.id" :label="ds.value" :value="ds.value"
                                    v-for="ds in printerOptions"></el-option>
                            </el-select>
                            <el-button type="info" class="ml-0.5" plain icon="Printer" @click="print"></el-button>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" class="mb20">
                        <el-form-item :label="$t('so.palletperark')" prop="palletperark">
                            <el-input clearable type="number" v-model="palletperark" style="width: auto;"></el-input>

                            <el-button type="success" class="ml-0.5" icon="upload" @click="getSoMark">{{ $t('so.import') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="MarkData" highlight-current-row border

                style="width: 100%; height: 100%"  stripe >
                <!-- 展开行 -->
                <el-table-column type="expand">
                    <template #default="props">
                        <div m="4" style="max-height: 400px; overflow-y: auto; padding: 4px">
                            <el-table :data="props.row.details" border ref="tableRef">
                                <el-table-column type="selection" width="40" align="center" />
                                <el-table-column prop="socode" :label="$t('so.socode')" show-overflow-tooltip />
                                <el-table-column prop="trayNo" :label="$t('so.trayNo')" show-overflow-tooltip />
                                <el-table-column prop="boxPerPallet" :label="$t('so.boxperpallet')"
                                    show-overflow-tooltip />
                            </el-table>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="batchNo" :label="$t('so.batchNo')" show-overflow-tooltip />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useMessage } from '/@/hooks/message';
import { getPrinter } from '/@/api/platform/wms/sp';
import { GetSoMark,printshippingMark } from '/@/api/platform/report/salesorder';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const PrinterName = ref('');
const palletperark = ref('42');
const Soid = ref();
const tableRef = ref();

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

//表格的配置
const MarkData=ref();
const dataForm = reactive({
});
//打印机列表
const printerOptions = ref();


// 打开弹窗
const openDialog = async (id: string) => {
    visible.value = true;
    Soid.value=id;
    // 重置表单数据
    nextTick(() => {
        dataFormRef.value?.resetFields();
        MarkData.value=null;
        PrinterName.value=null;
        palletperark.value=42;
    });
    getPrinter({ code: "printerSetup", text: "" }).then((res) => {
        printerOptions.value = res.data;
    });
};

// 提交
const onSubmit = async () => {
    const valid = await dataFormRef.value.validate().catch(() => {
    });
    if (!valid) return false;

    try {
        loading.value = true;

        visible.value = false; // 关闭弹窗
    } catch (error: any) {
        useMessage().error(error.msg);
    } finally {
        loading.value = false;
    }
};
//生成打印信息
function getSoMark() {
    GetSoMark({"soid":Soid.value,"Palletperark":palletperark.value}).then((res)=>{
        MarkData.value=res.data.list;
    })
}
//打印唛头
const print=()=>{
	const selectedAry = tableRef.value.getSelectionRows();
	if(!PrinterName.value){
		ElMessage.error(t('so.selectPrinter')); 
		return;
	}
	if(selectedAry.length==0){
		ElMessage.error(t('so.selectPallect')); 
		return;
	}
	selectedAry.forEach(element => {
		printshippingMark({"Socode":element.socode,"TrayNo":element.trayNo ,"TrayNoStart":element.trayNoStart,"TrayNoEnd":element.trayNoEnd,
        "BoxPerPallet":element.boxPerPallet,"printerName":PrinterName.value,"operatePage":"ShippingMark"}).then((res)=>{});
	});
	
}
// 暴露变量
defineExpose({
    openDialog,
});
</script>